<template>
    <div>
        <Form :model="formItem" inline>
            <FormItem>
                <Input v-model="formItem.company" placeholder="单位"></Input>
            </FormItem>
            <FormItem>
                <DatePicker v-model="formItem.business_time" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="日期" style="width: 200px"></DatePicker>
                <!--                <Input v-model="formItem.business_time" ></Input>-->
            </FormItem>
            <FormItem>
                <Button type="primary" @click="search()">搜索</Button>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="exportData"><Icon type="ios-download-outline"></Icon>导出</Button>
            </FormItem>
            <FormItem>
                <Button type="info" @click="back()">返回</Button>
            </FormItem>
        </Form>
        <Table border :columns="columns12" :data="data6" ref="table" :loading="loading">
            <template slot-scope="{ row }" slot="business_time">
                <strong>{{ row.business_time }}</strong>
            </template>
            <template slot-scope="{ row }" slot="type">
                <strong>{{ row.type }}</strong>
            </template>
        </Table>
<!--        <Row type="flex" justify="end" style="margin-top: 25px">-->
<!--            <Page :total="total" show-total @on-change="pageAction" />-->
<!--        </Row>-->
    </div>
</template>

<script>
import { getExportSpvTransactionsByMySeeList } from '@/api/user'
export default {

  name: 'test',

  data () {
    return {
      loading: true,
      start_time: '',
      end_time: '',
      total: 0,
      formItem: {
        company: '',
        business_time: []
      },
      value2: '',
      columns12: [
        {
          title: '卡号/客户编号',
          key: 'card_num',
          align: 'center'
        },
        {
          title: '交易流水号',
          key: 'batch_number',
          align: 'center'
        },
        {
          title: '金额',
          key: 'money',
          align: 'center'
        },
        {
          title: '交易类型',
          key: 'transaction_type',
          align: 'center'
        },
        {
          title: '交易状态',
          key: 'transaction_status',
          align: 'center'
        },
        {
          title: '客户名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '商品种类',
          key: 'type',
          slot: 'type',
          align: 'center'
        },
        {
          title: '油量（升）',
          key: 'fuel',
          align: 'center'
        },
        {
          title: '受理机构',
          key: 'acceptance_organization',
          align: 'center'
        },
        {
          title: '业务日期',
          key: 'business_time',
          slot: 'business_time',
          align: 'center'
        },
        {
          title: '交易时间',
          key: 'transaction_time',
          align: 'center'
        },
        {
          title: '单位',
          key: 'company',
          align: 'center'
        },
        {
          title: '问题类型',
          key: 'problem',
          align: 'center'
        }
        // {
        //   title: '是否审批',
        //   slot: 'action',
        //   width: 150,
        //   align: 'center'
        // }
      ],
      data6: []
    }
  },

  props: {

  },

  components: {

  },

  computed: {

  },

  methods: {
    format (time, format) {
      var t = new Date(time)
      var tf = function (i) { return (i < 10 ? '0' : '') + i }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
          case 'MM':
            return tf(t.getMonth() + 1)
          case 'mm':
            return tf(t.getMinutes())
          case 'dd':
            return tf(t.getDate())
          case 'HH':
            return tf(t.getHours())
          case 'ss':
            return tf(t.getSeconds())
        }
      })
    },
    async init (data) {
      getExportSpvTransactionsByMySeeList(data).then(ret => {
        this.data6 = ret.data.data
        this.data6.forEach(item => {
          item.problem = '高标号燃油'
        })
        this.loading = false
        // this.total = ret.data.data.totalRecord
      })
    },
    search () {
      if (this.formItem.business_time[0] !== '') {
        const data = {
          company: this.formItem.company,
          start_time: this.format(this.formItem.business_time[0], 'yyyy-MM-dd'),
          end_time: this.format(this.formItem.business_time[1], 'yyyy-MM-dd')
        }
        getExportSpvTransactionsByMySeeList(data).then(ret => {
          this.data6 = ret.data.data
          // this.total = ret.data.data.totalRecord
        })
      } else {
        const data = {
          company: this.formItem.company,
          start_time: '',
          end_time: ''
        }
        getExportSpvTransactionsByMySeeList(data).then(ret => {
          this.data6 = ret.data.data
          // this.total = ret.data.data.totalRecord
        })
      }
    },
    // pageAction (current) {
    //   getSpvTransactionsByMySeeList({ pageNo: current, company: this.formItem.company }).then(ret => {
    //     this.data6 = ret.data.data.results
    //   })
    // },
    back () {
      this.$router.push({
        name: 'fuel'
      })
    },
    exportData () {
      for (let i = 0; i < this.data6.length; i++) {
        if (this.data6[i].batch_number) {
          this.data6[i].batch_number = '\t' + this.data6[i].batch_number
        }
        if (this.data6[i].card_num) {
          this.data6[i].card_num = '\t' + this.data6[i].card_num
        }
      }
      this.$refs.table.exportCsv({
        filename: '导出文件',
        columns: this.columns12,
        data: this.data6
      })
    }
  },

  watch: {

  },

  mounted () {
    this.init()
  }

}
</script>

<style scoped>
    .ivu-table .demo-table-info-row td{
        background-color: #2db7f5;
        color: #fff;
    }
    .ivu-table .demo-table-error-row td{
        background-color: #ff6600;
        color: #fff;
    }
    .ivu-table td.demo-table-info-column{
        background-color: #2db7f5;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-name {
        background-color: #2db7f5;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-age {
        background-color: #ff6600;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-address {
        background-color: #187;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-name, .ivu-table td.demo-table-info-column {
        background-color: #2db7f5;
        color: #fff;
    }
</style>
